<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul>
    <table border="">
      <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
    <!-- <ul class="container"></ul> -->
    <script>
      // 第一个 ：把数组里的数据通过li显示出来
      /*  var arr = ["张三", "李四", "王五", "王小二"];
      var ul = document.querySelector("ul");
      //通过arr来拼接 html结构
      var htmlstr = "";
      for (var i = 0; i < arr.length; i++) {
        htmlstr += "<li>" + arr[i] + "</li>";
      }
      ul.innerHTML = htmlstr;
      首先就是怎么把数组里面的数据放到ul里面,ul里面没有li,所以我们添加进去的时候要加上li标签,li标签里面包含数组里面的内容`
      */

      //   //第二个根据 对象数组生成table
      var arr = [
        {
          name: "张三",
          age: 20,
        },
        {
          name: "李四",
          age: 30,
        },
        {
          name: "王五",
          age: 20,
        },
        {
          name: "王小二",
          age: 20,
        },
      ];
      var htmlstr = "";
      var tbody = document.querySelector("tbody");
      for (var i = 0; i < arr.length; i++) {
        htmlstr +=
          "<tr><td>" + arr[i].name + "</td><td>" + arr[i].age + "</td></tr>";
      }
      tbody.innerHTML = htmlstr;
    </script>
  </body>
</html>
